<template>
	<div class="tabctitem">
		<div class="m-hmsrch">
			<!-- 输入框的 -->
			<ipt></ipt>
			<!-- 搜索内容 -->
			<div class="m-default">
				<section class="m-hotlist" v-show="!skyList">
					<h3 class="title">热门搜索</h3>
					<ul class="list">
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">李荣浩新歌</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">Light The Light</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">树读</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">歌手</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">我们的乐队</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">吉卜力</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">朋友请听好</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">281公里</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">韦礼安双栖动物</a></li>
						<li class="item f-bd f-bd-full"><a class="link" href="javascript:void(0);">GENERATIONS</a></li>
					</ul>
				</section>
				<reslist></reslist>
				<ul v-if="skyList">
					<li class="recomitem" v-for="item in skyList" :key="item.id">
						<i class="u-svg u-svg-search"></i>
						<span class="f-bd f-bd-btm f-thide">{{item.keyword}}</span>
					</li>
				</ul>

			</div>
		</div>
	</div>
</template>

<script>
	import ipt from "@/components/search/ipt.vue";
	import reslist from "@/components/search/reslist.vue"

	export default {
		name: "search",
		data() {
			return {
				skeyword: "",
			}
		},
		methods: {

		},
		computed: {
			skyList: {
				// 拿到仓库的值
				get() {
					return this.$store.state.skyList;
				},
				// 通知仓库更新
				set(value) {
					this.$store.dispatch("updateSkyList", value);
				}
			}
		},
		components: {
			ipt,
			reslist
		}
	}
</script>

<style lang="scss" scoped="scoped">
	a {
		text-decoration: none;
		color: #333;
	}
	
	.m-hotlist {
		padding: 15px 10px 0;
	}

	.m-hotlist .title {
		font-size: 12px;
		line-height: 12px;
		color: #666;
	}

	.m-hotlist .list {
		margin: 10px 0 7px;
	}

	.m-hotlist .item {
		display: inline-block;
		height: 32px;
		margin-right: 8px;
		margin-bottom: 8px;
		padding: 0 14px;
		font-size: 14px;
		line-height: 32px;
		color: #333;

		a {
			padding: 4px 7px;
			border: 1px solid #d3d4da;
			border-radius: 20px;
		}
	}

	.recomitem {
		display: flex;
		align-items: center;
		height: 45px;
		padding-left: 10px;
	}

	.m-recom i {
		flex: 0 0 auto;
		margin-right: 7px;
	}

	.u-svg-search {
		width: 15px;
		height: 15px;
		background-image: url();
	}

	.u-svg {
		display: inline-block;
		vertical-align: middle;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.recomitem span {
		display: inline-block;
		flex: 1;
		width: 1%;
		padding-right: 10px;
		font-size: 15px;
		line-height: 45px;
		color: #333;
	}
</style>
